<script lang="ts" setup>
// import { NotificationsCircle } from "@vicons/ionicons5";
import BaseWindow from "@/components/base-window/index.vue";
import u75Svg from "@/assets/svg/u75.svg";
const data = [
  {
    name: "入库登记数",
    value: "400",
  },
  {
    name: "出库登记数",
    value: "350",
  },
];
</script>
<template>
  <BaseWindow title="出入库信息">
    <div class="wrapper">
      <div v-for="item in data" class="info-item">
        <div class="top">
          <img :src="u75Svg" />
        </div>
        <div class="tite">{{ item.name }}</div>
        <div class="number-bg-wrapper">
          <div v-for="item in [1, 2, 3]" class="number-bg"></div>
        </div>
        <div class="number">
          <n-number-animation
            class="number"
            ref="numberAnimationInstRef"
            :from="0"
            :to="item.value"
          />
        </div>
      </div>
    </div>
  </BaseWindow>
</template>
<style lang="scss" scoped>
.wrapper {
  padding: 15px 30px;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 500px;
  display: flex;
  .info-item {
    width: 190px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .number-bg-wrapper {
    position: absolute;
    display: flex;
    left: 30px;
    margin-top: 120px;
    .number-bg {
      background-color: rgba(3, 207, 208, 1);
      width: 35px;
      height: 60px;
      margin-right: 6px;
    }
  }
  .number {
    position: relative;
    font-size: 48px;
    letter-spacing: 12px;
  }
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>
<style></style>
